<template>
    <div class="product-list">

        <el-radio-group v-model="type" size="small" @input="resetHander">
            <el-radio-button label="local">本地上传</el-radio-button>
            <el-radio-button label="online">线上图片</el-radio-button>
        </el-radio-group>
       
        <el-form ref="uploadForm" class="uploadForm" :model="uploadParams"  label-width="80px" size="small">
           
            <!-- 上传本地图片
                :auto-upload="false"   关闭自动上传
                :file-list="fileList"  文件上传之前的预览列表
                :on-change="uploadChangeHandler"   文件选中是触发的事件(file对象转base64)
            
             -->
            <el-form-item v-if="type=='local'" label="图片地址" prop="img" :rules="[{ required: true,message:'请传入图片地址',trigger:'blur'}]">
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    
                    :auto-upload="false"
                    :file-list="fileList"
                    :on-change="uploadChangeHandler"
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
             <!-- 上传 线上图片 -->
            <el-form-item v-else label="图片地址" prop="img" :rules="[{ required: true,message:'请传入图片地址',trigger:'blur'}]">
                <el-input v-model="uploadParams.img"></el-input>
            </el-form-item>
            <el-form-item label="图片提示" prop="alt" :rules="[{required:true,message:'请传入图片提示',trigger:'blur'}]">
                <el-input v-model="uploadParams.alt"></el-input>
            </el-form-item>
            <el-form-item label="图片链接" prop="link" :rules="[{required:true,message:'请传入图片链接',trigger:'blur'}]">
                <el-input v-model="uploadParams.link"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="uploadHandler">上传</el-button>
                <el-button type="primary" @click="resetHander">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { addBannerAPI } from '@/api/banner';
    export default {
        name:"BannerAddView",
        data(){
            return {
                start:null,
                end:null,
                uploadParams:{
                    img:"",
                    alt:"",
                    link:"",
                },
                fileList:[],
                type:"local",
            }
        },
        methods:{
            async addBannerAPI(){
                try{
                    var res = await addBannerAPI(this.uploadParams);
                    this.$message.success("上传成功");
                    console.log("新增成功",res);
                }catch(err){
                    this.$message.error(err.message);
                }
            },
            uploadHandler(){
                this.$refs.uploadForm.validate((bool)=>{
                    console.log("点击校验",bool);
                    if(bool){
                        this.addBannerAPI();
                        this.resetHander();
                       
                    }
                })
            },
            uploadChangeHandler(file, fileList){
                // file    => element-ui处理后的文件信息
                // fileList  =>  element-ui处理后的文件信息列表(多文件上传)
                console.log("uploadChangeHandler",file, fileList);

                // 上传文件列表控制 => 只显示最后一张
                this.fileList = fileList.slice(-1);

                let raw = file.raw; // 原始文件信息 => file对象
                // 因为后端没有处理,不能直接接收file对象 => file文件转化为字符串文件(base64)
                var fr = new FileReader();
                fr.readAsDataURL(raw);
                fr.onload = ()=>{
                    console.log("转化成功",fr);
                    this.uploadParams.img = fr.result;
                }

            },
            resetHander(){
                // 重置表单
                this.$refs.uploadForm.resetFields();
                // 重置文件上传时预览列表
                this.fileList = [];
            }
        },

        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        beforeRouteEnter:function(to,from,next){  // 此路由守卫执行时,当前组件还未挂载, 没有组件实例 => 不能使用this
            console.log("进去新增banner页:/banner/add");
            console.log("from",from);
            console.log("to",to);
            console.log("this",this); // undefined

            // next(); 

            // 如何在beforeRouteEnter使用this
            // 如果想在此阶段使用组件实例 => 必须等组件实例挂载完毕之后才行 => next()方法可以接收回调函数 => 此回调函数会在组件挂载完毕之后执行

            next(function(vm){
                console.log("组件实例",vm);

                vm.start = Date.now();
            }); 
            
        },
        beforeRouteLeave:function(to,from,next){  // 此路由守卫执行时,当前组件还未挂载, 没有组件实例 => 不能使用this
           

            this.end = Date.now();

            if(this.end - this.start >= 10000){
                this.$message.success("任务完成");
                next();
            }else{
                this.$message.success("任务未完成,还想走!");
                next(false);
            }

            
            
        }
    }
</script>

<style scoped>
    .uploadForm{
        width: 50%;
    }
</style>